import { useBoolean } from 'ahooks'
import { Card, Icon, Input, Tooltip } from 'antd'
import React, { useCallback, useRef, useState } from 'react'
import AddTreeItemModal from './AddTreeItemModal'
import CatalogTree from './CatalogTree'
import EditCatalogModal from './EditCatalogModal'
import EditProcessModal from './EditProcessModal'
import styles from './index.less'

const { Search } = Input

function LeftContent({ height, onSelectProcess, onSelectDir }) {
  // 搜索关键字
  const [searchKey, setSearchKey] = useState('')

  // 编辑目录弹窗显隐
  const [
    editDirModalVisible,
    { setFalse: hideEditDirModal, setTrue: showEditDirModal },
  ] = useBoolean(false)

  // 编辑流程弹窗显隐
  const [
    editProcessModalVisible,
    { setFalse: hideEditProcessModal, setTrue: showEditProcessModal },
  ] = useBoolean(false)

  // 新增弹窗显隐
  const [addModalVisible, { setFalse: hideAddModal, setTrue: showAddModal }] = useBoolean(false)

  // 编辑目录弹窗数据
  const [editDirModalData, setEditDirModelData] = useState({})

  // 编辑流程弹窗数据
  const [editProcessModalData, setEditProcessModelData] = useState({})

  // 新增弹窗数据
  const [addModalData, setAddModelData] = useState({})

  // 目录树ref
  const treeRef = useRef(null)

  // 刷新目录树
  const refreshTree = useCallback(() => {
    if (treeRef && treeRef.current)
      treeRef.current.refresh()
  }, [])

  // 使用数据显示编辑弹窗
  const showEditDirModalWithData = useCallback(
    (data) => {
      setEditDirModelData(data)
      showEditDirModal()
    },
    [showEditDirModal],
  )

  // 使用数据显示编辑弹窗
  const showEditProcessModalWithData = useCallback(
    (data) => {
      setEditProcessModelData(data)
      showEditProcessModal()
    },
    [showEditProcessModal],
  )

  // 使用数据显示新增弹窗
  const showAddModalWithData = useCallback(
    (data) => {
      setAddModelData(data)
      showAddModal()
    },
    [showAddModal],
  )

  // 编辑目录
  const editDir = useCallback(
    (node) => {
      showEditDirModalWithData({
        catalogId: node.catalogId,
        catalogTitle: node.title,
        parentCatalogId: node.parentCatalogId,
        sort: node.sort,
      })
    },
    [showEditDirModalWithData],
  )

  // 编辑流程
  const editProcess = (node) => {
    showEditProcessModalWithData({
      processId: node.processId,
      parentCatalogId: node.catalogId,
      processName: node.title,
      processCode: node.processCode,
      dataSourceType: node.dataSourceType,
    })
  }

  // 新建子目录或流程
  const addTreeItem = useCallback(
    (parentNode) => {
      showAddModalWithData({
        parentCatalogId: parentNode.catalogId,
        parentCatalogTitle: parentNode.title,
      })
    },
    [showAddModalWithData],
  )

  // 新增子目录
  const addSubDir = useCallback(
    (data) => {
      hideAddModal()
      showEditDirModalWithData(data)
    },
    [hideAddModal, showEditDirModalWithData],
  )

  // 新增流程
  const addProcess = useCallback(
    (data) => {
      hideAddModal()
      showEditProcessModalWithData(data)
    },
    [hideAddModal, showEditProcessModalWithData],
  )

  return (
    <Card
      className="cute"
      style={{ height }}
      bodyStyle={{ padding: '16px 16px 0px 16px', height: height - 37, overflowY: 'auto' }}
      title="流程目录"
      extra={
        <>
          <Tooltip className="margin-right" title="刷新目录树">
            <Icon type="sync" className={styles.icon_hover} onClick={refreshTree} />
          </Tooltip>
          <Tooltip title="新增主目录">
            <Icon
              type="plus-circle"
              className={styles.icon_hover}
              onClick={() => showEditDirModalWithData({})}
            />
          </Tooltip>
        </>
      }
    >
      <EditCatalogModal
        visible={editDirModalVisible}
        onClose={hideEditDirModal}
        onOk={() => {
          hideEditDirModal()
          refreshTree()
        }}
        data={editDirModalData}
      />
      <EditProcessModal
        visible={editProcessModalVisible}
        onClose={hideEditProcessModal}
        onOk={() => {
          hideEditProcessModal()
          refreshTree()
        }}
        data={editProcessModalData}
      />
      <AddTreeItemModal
        visible={addModalVisible}
        onClose={hideAddModal}
        data={addModalData}
        onAddSubDir={addSubDir}
        onAddProcess={addProcess}
      />
      <Search
        style={{ marginBottom: 8 }}
        placeholder="Search..."
        onPressEnter={e => setSearchKey(e.target.value)}
        onSearch={value => setSearchKey(value)}
      />
      <CatalogTree
        ref={treeRef}
        searchKey={searchKey}
        onEditDir={editDir}
        onEditProcess={editProcess}
        onAddSubDir={addTreeItem}
        onDelete={refreshTree}
        onSelectProcess={onSelectProcess}
        onSelectDir={onSelectDir}
      />
    </Card>
  )
}

export default LeftContent
